/**
 * 主组件
 */
import React from 'react'
import { connect } from 'react-redux'
import { Switch, Route, Redirect } from 'react-router-dom'
import LaobanInfo from '../laoban-info/laobanInfo'
import DashenInfo from '../dashen-info/dashenInfo'
import Cookies from 'js-cookie' // 可以操作前台的cookies
import { NavBar } from 'antd-mobile'
import { getRedirectTo } from '../../utils/index'
import { getUser } from '../../redux/action'
import NotFound from '../../components/not-found/NotFound'
import Laoban from '../laoban/laoban'
import Dashen from '../dashen/dashen'
import Message from '../message/message'
import Personal from '../personal/personal'
import NavFooter from '../../components/nav-footer/NavFooter'
import Chat from '../chats/chat'
class Main extends React.Component {
  componentDidMount() {
    const userId = Cookies.get('userId')
    const { _id } = this.props.user
    if (userId && !_id) {
      // 发送异步请求获取用户信息
      this.props.getUser()
    }
  }

  // 给组件对象添加属性
  navList = [
    {
      path: '/dashen',
      component: Laoban,
      icon: 'dashen',
      title: '老板列表',
      text: '老板'
    },
    {
      path: '/laoban',
      component: Dashen,
      icon: 'laoban',
      title: '大神列表',
      text: '大神'
    },
    {
      path: '/message',
      component: Message,
      icon: 'message',
      title: '消息',
      text: '消息'
    },
    {
      path: '/personal',
      component: Personal,
      icon: 'personal',
      title: '个人中心',
      text: '大神'
    }
  ]

  render() {
    // 读取cookies中的userId
    const userId = Cookies.get('userId')
    // 如果没有自动重定向到登录界面
    if (!userId) {
      return <Redirect to="login" />
    }
    // 如果有，读取redux中的user状态值
    const { user, unReadCount } = this.props
    // 如果user没有_id，向后台发请求，返回null
    if (!user._id) {
      return null
    } else {
      // 如果有，显示到对应的界面
      let path = this.props.location.pathname
      if (path === '/') {
        path = getRedirectTo(user.type, user.header)
        return <Redirect to={path} />
      }
    }

    const { navList } = this
    const path = this.props.location.pathname
    const currentNav = navList.find(nav => path === nav.path)
    if (currentNav) {
      if (user.type === 'laoban') {
        // 是老板就把老板的隐藏
        navList[0].hide = true
      } else {
        navList[1].hide = true
      }
    }
    return (
      <div>
        {currentNav ? (
          <NavBar className="mySelf-nav">{currentNav.title}</NavBar>
        ) : null}
        <Switch>
          {navList.map(item => (
            <Route
              key={item.path}
              path={item.path}
              component={item.component}
            ></Route>
          ))}
          <Route path="/laobaninfo" component={LaobanInfo}></Route>
          <Route path="/dashenInfo" component={DashenInfo}></Route>
          <Route path="/chat/:userId" component={Chat}></Route>
          <Route component={NotFound} />
        </Switch>
        {currentNav ? (
          <NavFooter unReadCount={unReadCount} navList={navList}></NavFooter>
        ) : null}
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user, unReadCount: state.Chat.unReadCount }),
  { getUser }
)(Main)

/**
 * 1. 实现自动登录
 *  如果cookies中有userId,发请求 获取对应的user
 *  如果cookies中没有userId，自动进入Login界面
 * 2. 如果已经登录，如果请求根路径
 *  根据user的type和head来计算出重定向的路径，并自动重定向
 *
 */
